/**
 * 响应式布局适配方案
 * 基于rem单位和媒体查询实现多屏幕尺寸适配
 * 支持宽度和高度的自适应转换
 *
 * @format
 */

// 设计稿基准宽度（默认1920px）
const designWidth = 1920;
// 设计稿基准高度（默认1080px）
const designHeight = 1080;
// 基准字体大小
const baseFontSize = 16;
// 最小字体大小限制（避免在小屏幕上字体过小）
const minFontSize = 12;
// 最大字体大小限制（避免在大屏幕上字体过大）
const maxFontSize = 22;

/**
 * 设置根元素字体大小
 * 根据当前屏幕宽度与设计稿宽度的比例计算
 */
function setRootFontSize() {
  // 获取当前窗口宽度
  const clientWidth =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth;

  // 获取当前窗口高度
  const clientHeight =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight;

  // 计算宽度缩放比例
  let widthScale = clientWidth / designWidth;

  // 计算高度缩放比例
  let heightScale = clientHeight / designHeight;

  // 使用宽度缩放比例作为主要缩放因子
  let scale = widthScale;

  // 计算根字体大小
  let fontSize = baseFontSize * scale;

  // 限制最小和最大字体大小
  fontSize = baseFontSize; // Math.max(minFontSize, Math.min(fontSize, maxFontSize));

  // 设置根元素字体大小
  document.documentElement.style.fontSize = fontSize + 'px';

  // 将缩放比例保存到全局变量，供工具函数使用
  window._widthScale = widthScale;
  window._heightScale = heightScale;
}

// 初始化
setRootFontSize();

// 监听窗口大小变化
window.addEventListener('resize', setRootFontSize);

// 监听屏幕方向变化（移动设备）
window.addEventListener('orientationchange', setRootFontSize);

// 声明全局变量类型
declare global {
  interface Window {
    _widthScale: number;
    _heightScale: number;
  }
}

// 导出一些工具函数，方便在组件中使用
export const remTool = {
  // px转rem的计算函数（宽度）
  pxToRem(px: any) {
    return `${px / baseFontSize}rem`;
  },

  // px转rem的计算函数（宽度）
  pxToRemTextTop(px: any) {
    return window.innerWidth > 768
      ? `${px / baseFontSize}rem`
      : `${px / 96}rem`;
  },

  // px转rem的计算函数（宽度）
  pxToRemTextLeft(px: any) {
    return window.innerWidth > 768
      ? `${px / baseFontSize}rem`
      : `${px / 96}rem`;
  },
  // px转rem的计算函数（高度）
  pxToRemHeight(px: any) {
    return window.innerWidth > 768 ? `${px / baseFontSize}rem` : '0.3rem';
  },

  pxToRemBtnLeft(px: any) {
    return window.innerWidth > 768 ? `${px / baseFontSize}rem` : '0.3rem';
    // `${px / 60}rem`
  },
  pxToRemBtnTop(px: any) {
    return window.innerWidth > 768
      ? `${px / baseFontSize}rem`
      : `${px / 60}rem`;
    // `6rem`;
  },
  // 获取当前根字体大小
  getCurrentRootFontSize() {
    return parseFloat(document.documentElement.style.fontSize);
  },

  // 获取当前屏幕与设计稿的宽度比例
  getWidthScale() {
    return window._widthScale || this.getScale();
  },

  // 获取当前屏幕与设计稿的高度比例
  getHeightScale() {
    const clientHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    return window._heightScale || clientHeight / designHeight;
  },

  // 获取当前屏幕与设计稿的比例（兼容旧版本）
  getScale() {
    const clientWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
    return clientWidth / designWidth;
  },
};

export default remTool;
